<template>
	<view class="page-content" :style="{'--main-color-1':configInfo.mainColor,'--main-color-2':configInfo.mainColor1}">
		<view class="top-bar-bg"></view>
		<view class="p-t-md p-l-md p-r-md">
			<view class="flex-start p-md section-bg radius-5 rel">
				<view class="flex-center user-avatar" @click="$util.go('my/my_info',{login:true})" v-if="userInfo">
					<u-avatar :src="userInfo.avatar" size="50" v-if="userInfo"></u-avatar>
				</view>
				<view class="m-l-sm flex flex-column">
					<view class="flex-start">
						{{ userInfo.merchant.real_name }}
						<text class="badge m-l-sm" :class="{'bg-success' : userInfo.merchant.state == 2,'bg-warning' : userInfo.merchant.state != 2,'bg-danger' : userInfo.merchant.state == 4}" style="color: #fff;">{{ userInfo.merchant.state_text }}</text>
					</view>
					<text class="text-xs text-secondary m-t-xs">{{ $util.handleStr($t('merchant.join-time-text'),userInfo.merchant.join_day) }}</text>
				</view>
			</view>
		</view>
		<view class="data-list section-bg conter" v-if="merchant.data">
			<view class="title-part flex-between flex-align-items p-md p-t-sm p-b-sm">
				<m-icon name="bubble-chart-line" :text="$t('merchant.card-1-title')"></m-icon>
			</view>
			<u-grid :border="false">
				<u-grid-item>
					<text class="grid-value number">{{ merchant.data.wait }}</text>
					<view class="grid-desc">
						<text>{{$t('merchant.card-1-data-1')}}</text>
					</view>
				</u-grid-item>
				<u-grid-item>
					<text class="grid-value number">{{ merchant.data.ing }}</text>
					<view class="grid-desc">
						<text>{{$t('merchant.card-1-data-2')}}</text>
					</view>
				</u-grid-item>
				<u-grid-item>
					<text class="grid-value number">{{ merchant.data.over }}</text>
					<view class="grid-desc">
						<text>{{$t('merchant.card-1-data-3')}}</text>
					</view>
				</u-grid-item>
				<u-grid-item>
					<text class="grid-value number">{{ merchant.data.today }}</text>
					<view class="grid-desc">
						<text>{{$t('merchant.card-1-data-4')}}</text>
					</view>
				</u-grid-item>
				<u-grid-item>
					<text class="grid-value number">{{ merchant.data.yesterday }}</text>
					<view class="grid-desc">
						<text>{{$t('merchant.card-1-data-5')}}</text>
					</view>
				</u-grid-item>
				<u-grid-item>
					<text class="grid-value number">{{ merchant.data.total }}</text>
					<view class="grid-desc">
						<text>{{$t('merchant.card-1-data-6')}}</text>
					</view>
				</u-grid-item>
				
			</u-grid>
			<view class="text-xs text-auxiliary p-b-sm" style="text-align: center;">
				{{$t('merchant.card-1-tips-text')}}
			</view>
		</view>
		<view class="section-bg m-md radius-5 rel">
			<u-tabs
				:list="sortList" 
				lineWidth="20"
				lineHeight="3"
				lineColor="#ffd426"
				itemStyle="height: 40px;"
				:activeStyle="{
						fontWeight:'600',
						fontSize:'29rpx',
						color:'#232426',
					}"
			    :inactiveStyle="{
						fontSize:'29rpx',
						color:'#909193',
					}"
				:scrollable="false"
				@change="screenChange"
			></u-tabs>
		</view>
		
		<m-loading :show="listLoad" :emptyShow="list.data.length <= 0"></m-loading>
		<view class="task-list rel" v-if="!listLoad">
			<view class="task-list_item m-md section-bg radius-5 p-md" :class="{'vip' : item.limit_level > 1}" v-for="(item, index) in list.data" :key="index" @click="$util.go('pages/order_list?task_id='+item.id,{path:'/merchant/'})">
				<view class="flex-between flex-align-items flex-warp-nowarp" style="align-items: flex-start;">
					<view class="task-list_item-title text-sm flex-start" style="max-width: 65%;">
						<text class="badge m-r-sm">{{item.type_text}}</text>
						<text class="u-line-2 text-c-title text-weight">{{ item.title }}</text>
						<text class="badge-vip on" v-if="item.limit_level > 1"></text>
					</view>
					<view class="flex-start">
						<view class="task-item_state loading-state" :class="{'orange' : item.state == 2 , 'green' : item.state == 3 , 'red' : item.state == 5}">
							<text class="text-sm">{{ item.state_text }}</text>
						</view>
					</view>
				</view>
				<view class="m-t-xs text-xs text-secondary">
					
					<text>{{ $util.handleStr($t('merchant.task-item-time'),item.create_time) }}</text>
				</view>
				<view class="m-t-xs flex-between">
					<view class="flex-start text-xs text-secondary">
						<text class="m-r-sm" v-if="item.cate_title">{{ $util.handleStr($t('merchant.task-item-cate'),item.cate_title) }}</text>
						<text class="m-r-sm">{{ $util.handleStr($t('merchant.task-item-money'),item.unit_price) }}</text>
						<text>{{ $util.handleStr($t('merchant.task-item-integral'),item.unit_integral) }}</text>
					</view>
					<view>
						<text class="text-xs text-auxiliary">{{item.join_num}} / {{item.ticket_num}}</text>
					</view>
				</view>
			</view>
		</view>
		<uni-load-more :status="status"  :content-text="contentText" v-if="showLoading"></uni-load-more>
<!-- 		<view class="add-btn">
			<u-transition :show="true" mode="fade-right">
				<view class="add-btn_icon flex-center" @click="taskTypeShow = true">
					<m-icon name="add-line" size="60rpx"></m-icon>
				</view>
			</u-transition>
		</view> -->
		
		<!-- 侧边小工具 -->
		<side-tools :scrollTop="scrollTop">
			<template #items>
				<view class="side-tools_item" @click="$util.go('pages/add?type=1',{path:'/merchant/'})">
					<m-icon name="add-line" size="38rpx"></m-icon>
				</view>
			</template>
		</side-tools>
		
		<!-- @click="$util.go('pages/add',{path:'/merchant/'})" -->
		<u-action-sheet :actions="taskTypes" round="5" @select="addTask" title="选择要发布的任务类型" cancelText="取消" :show="taskTypeShow" @close="taskTypeShow = false"></u-action-sheet>

	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	export default {
		data() {
			return {
				
				merchant:[],
				scrollTop:0,
				chickenText:'',
				sortList: [{
					name: this.$t('merchant.index-tabs-1'),
				},{
					name: this.$t('merchant.index-tabs-2'),
					state:2,
				},{
					name: this.$t('merchant.index-tabs-3'),
					state:3,
				},{
					name: this.$t('merchant.index-tabs-4'),
					state:6,
				}],
				addShow:false,
				taskList:[],
				onScreen:{},
				showLoading:false,
				status:"loading",
				tasksObject:"",
				taskCacheKey:'my_task_list',
				listLoad:true,
				listEmptyShow:false,
				taskTypeShow:false,
				taskTypes:[
				// {
				// 	type:2,
				// 	name:'兼职任务'
				// },
				{
					type:1,
					name: '悬赏任务'
				}
			],
			}
		},
		computed: mapState({
			userInfo: state => state.user.userInfo,
			configInfo: state => state.config.configInfo,
			contentText: state => state.content.contentText,
			param: state => state.task.myTaskParam,
			list: state => state.task.myTaskList,
		}),

		/* 页面加载完成 */
		async onLoad(){
			this.init()
		},
		
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		
		/* 页面准备 */
		onReady(){
			if(this.$wechat.isWechat()) this.$util.navTitle()
		},
		
		/* 页面显示 */
		async onShow(){
			this.getList()
		},
		
		/* 页面隐藏 */
		onHide(){
			// 关闭加载
			uni.stopPullDownRefresh();
		},
		
		/* 上拉刷新 */
		async onPullDownRefresh(){
			await this.getList();
			this.$util.showToast(this.$t('app.renovate.success'),function(){
				uni.stopPullDownRefresh();
			});
		},
		

		async onReachBottom(){
			if (this.list.current_page >= this.list.last_page || this.ListLoad){
				this.status="nomore";
				return
			};
			this.status = "loading";
			this.showLoading = true;
			this.getList(this.param.page + 1);
		},
		
		methods: {
			...mapActions(['getMyTaskList','getUserInfo','getConfigInfo']),
			...mapMutations(['updateTaskState']),
			
			init(){
				// let add_type = this.configInfo.merchant_add_type
				// if(add_type == 1){
				// 	this.taskTypes.splice(1, 1)
				// }
				// if(add_type == 2){
				// 	this.taskTypes.splice(0, 1)
				// }
				this.getConfigInfo()
				this.getUserInfo()
				this.getMerchantInfo()
			},
			
			async getMerchantInfo(){
				let param = {
					'channel':2,
					'channel_id':this.userInfo.uid
				}
				let res = await this.$api.merchant.getMerchantInfo(param)
				if(res.code == 200){
					this.merchant = res.data
				}
			},
			
			// 获得我发布的任务列表
			async getList(page = 0){
				let param = uni.$u.deepClone(this.param)
				param.channel_id = this.userInfo.uid
				if (page) param.page = page
				this.updateTaskState({
					key: 'myTaskParam',
					val: param
				})
				await this.getMyTaskList(param)
				this.listLoad = false
				this.addShow = true
			},
			
			// 筛选
			screenChange(e){
				this.listLoad = true;
				this.showLoading = false;
				let param = uni.$u.deepClone(this.param)
				param.state = e.state
				this.updateTaskState({
					key: 'myTaskParam',
					val: param
				})
				uni.pageScrollTo({
					scrollTop: 0
				})
				this.getList(1);
			},
			
			// 发布任务
			addTask(e){
				if(e.type){
					this.$util.go('pages/add?type='+e.type,{path:'/merchant/'})
				}
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: var(--theme-page-bg);
	}
	/deep/ .u-alert{
		margin: 30rpx 30rpx 0;
		border-radius: 10px;
	}
	// .data-list{
	// 	background-color: #fff;
	// 	padding: 30rpx;
	// 	.e-tips{
	// 		margin-top: 30rpx;
	// 		font-size: 28rpx;
	// 		text-align: center;
	// 		color: $incolor-3;
	// 	}
	// }
	// .task-list{
	// 	// background-color: #fff;
	// 	border-radius: 10px;
	// 	overflow: hidden;
	// 	// 组件样式
	// 	.u-tabs{
	// 		// border-bottom: 1px solid #eee;
	// 		// background-color: #fff;
	// 		margin-bottom: 15px;
	// 	}
	// }
	.task-item{
		position: relative;
		font-size: $contentSize;
		// color: $incolor-2;
		padding:15px 30rpx;
		// border-bottom: 1px solid #f5f5f5;
		background-color: #fff;
		margin-bottom: 15px;
		border-radius: 10px;
		&_title{
			color: $incolor-1;
		}
		&_tips{
			margin: 5px 0;
		}
		&_time{
			font-size: $contentSize;
			color: $incolor-2;
		}
		
	}
	
	.task-item:last-child{
		border-bottom: none;
	}
	.operaction-tools{
		position: fixed;
		width: 100%;
		background-color: #fff;
		bottom: 0;
		left: 0;
		min-height: 46px;
		&_btn{
			width: 140rpx;
			height: 140rpx;
			background-color: var(--main-color-1);
			border-radius: 100%;
			margin-top: -23px;
			border: 5px solid #fff;
		}
	}

</style>
